<template>
    <div>
        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in 6" :key="item">
                <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
        <el-row>
            <el-col :span="8">
                <el-card class="box-card" style="width: 400px">
                    <div slot="header" class="clearfix">
                        <span>{{this.user.name}}</span>
                    </div>
                    <div>
                        <div style="display: flex;justify-content: center">
                            <!--                    <el-upload-->
                            <!--                            action="/admin/updateFace" :headers="headers" :data="user" :on-success="onSuccess" :show-file-list="false">-->

                            <el-upload
                                    action="/admin/updateFace" :data="user" :on-success="onSuccess" :show-file-list="false">


                                <img title="点击修改用户头像" :src="this.user.userFace" style="height: 100px;width: 100px;border-radius: 50px"
                                     alt="出了点问题">
                            </el-upload>
                        </div>
                        <div>联系方式：
                            <el-tag>{{this.user.phone}}</el-tag>
                        </div>
                        <div>电子邮件：
                            <el-tag>{{this.user.email}}</el-tag>
                        </div>
                        <div>家庭住址：
                            <el-tag>{{this.user.address}}</el-tag>
                        </div>
                        <div>身份职称：
                            <el-tag>{{this.user.competent}}</el-tag>
                        </div>
                        <div>归属组织：
                            <el-tag>{{this.user.affiliation}}</el-tag>
                        </div>
                        <div>角色：
                            <el-tag type="success" v-for="(role,index) in this.user.roles" :key="index">{{role.nameZh}}</el-tag>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: space-around;margin-top: 10px">
                        <el-button @click="drawer = true" type="primary">日历日程</el-button>
                        <el-button type="primary" @click="dialogVisible = true">修改信息</el-button>
                        <el-button type="danger" @click="passwordDialogVisible = true">修改密码</el-button>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16" >

                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>座右铭</span>
                    </div>
                    <el-collapse v-model="activeNames">
                        <el-collapse-item title="一致性 Consistency" name="1">
                            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                        </el-collapse-item>
                        <el-collapse-item title="反馈 Feedback" name="2">
                            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                        </el-collapse-item>
                        <el-collapse-item title="效率 Efficiency" name="3">
                            <div>简化流程：设计简洁直观的操作流程；</div>
                            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                        </el-collapse-item>
                        <el-collapse-item title="可控 Controllability" name="4">
                            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                        </el-collapse-item>
                        <el-collapse-item title="可控 Controllability" name="5">
                            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                        </el-collapse-item>
                        <el-collapse-item title="可控 Controllability" name="6">
                            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                        </el-collapse-item>
                    </el-collapse>
                </el-card>

            </el-col>

        </el-row>





        <el-drawer
                title="日历" :visible.sync="drawer" size="50%">
            <el-calendar>
                <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                <template slot="dateCell" slot-scope="{date, data}">
                    <span @click="innerDrawer = true" v-on:click="todaySchedule(data.day)">
                        {{ data.day.split('-').slice(1).join('-') }}
                        {{ calendar(data.day.split('-').slice(1).join('-'))?'🙃':'' }}
                        {{ data.isSelected ? '✔️' : ''}}
                    </span>
                </template>
            </el-calendar>
            <div>
                <el-drawer
                        title="日程"
                        :append-to-body="true"
                        :before-close="handleClose"
                        :visible.sync="innerDrawer">
                    <div class="block" onscroll>
                        <el-timeline>
                            <el-timeline-item timestamp="上午第一节" placement="top">
                                <el-card>
                                    <p>{{this.daySchedule["one"].courseName}}</p>
                                    <p>{{this.daySchedule["one"].classroomName}}</p>
                                    <p>{{this.daySchedule["one"].classNum}}</p>
                                </el-card>
                            </el-timeline-item>
                            <el-timeline-item timestamp="上午第二节" placement="top">
                                <el-card>
                                    <p>{{this.daySchedule["two"].courseName}}</p>
                                    <p>{{this.daySchedule["two"].classroomName}}</p>
                                    <p>{{this.daySchedule["two"].classNum}}</p>
                                </el-card>
                            </el-timeline-item>
                            <el-timeline-item timestamp="下午第一节" placement="top">
                                <el-card>
                                    <p>{{this.daySchedule["three"].courseName}}</p>
                                    <p>{{this.daySchedule["three"].classroomName}}</p>
                                    <p>{{this.daySchedule["three"].classNum}}</p>
                                </el-card>
                            </el-timeline-item>
                            <el-timeline-item timestamp="下午第二节" placement="top">
                                <el-card>
                                    <p>{{this.daySchedule["four"].courseName}}</p>
                                    <p>{{this.daySchedule["four"].classroomName}}</p>
                                    <p>{{this.daySchedule["four"].classNum}}</p>
                                </el-card>
                            </el-timeline-item>
                            <el-timeline-item timestamp="晚自习" placement="top">
                                <el-card>
                                    <p>{{this.daySchedule["five"].courseName}}</p>
                                    <p>{{this.daySchedule["five"].classroomName}}</p>
                                    <p>{{this.daySchedule["five"].classNum}}</p>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                    <p>_(:зゝ∠)_</p>
                </el-drawer>
            </div>
        </el-drawer>

        <el-dialog title="编辑个人信息" :visible.sync="dialogVisible" width="30%">
            <div>
                <div>
                    <el-tag type="success">手机号</el-tag>
                    <el-input v-model="updateUser.phone" size="small" class="updatePosInput"
                              placeholder="请输入手机号"></el-input>
                </div>
                <div>
                    <el-tag type="info">备用联系人</el-tag>
                    <el-input v-model="updateUser.telephone" size="small" class="updatePosInput"
                              placeholder="请输入备用联系人"></el-input>
                </div>
                <div>
                    <el-tag type="warning">地址</el-tag>
                    <el-input v-model="updateUser.address" size="small" class="updatePosInput"
                              placeholder="请输入地址"></el-input>
                </div>
                <div>
                    <el-tag type="danger">姓名</el-tag>
                    <el-input v-model="updateUser.name" size="small" class="updatePosInput"
                              placeholder="请输入姓名"></el-input>
                </div>
                <div>
                    <el-tag type="info">邮箱</el-tag>
                    <el-input v-model="updateUser.email" size="small" class="updatePosInput"
                              placeholder="请输入邮箱"></el-input>
                </div>
                <div>
                    <el-tag type="info">身份证</el-tag>
                    <el-input v-model="updateUser.cardId" size="small" class="updatePosInput"
                              placeholder="请输入身份证"></el-input>
                </div>
                <div>
                    <el-tag type="info">归属班级</el-tag>
                    <el-input v-model="updateUser.affiliation" size="small" class="updatePosInput"
                              placeholder="请输入归属班级"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeUpdate">取 消</el-button>
                <el-button type="primary" @click="updateOrInsert">提 交</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改密码" :visible.sync="passwordDialogVisible" width="30%">
            <div>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                         class="demo-ruleForm">
                    <el-form-item label="旧密码" prop="oldPass">
                        <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>

    export default {
        name: "UserInfo",
        data() {

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                headers: {
                    Authorization: window.sessionStorage.getItem('tokenStr')
                },
                passwordDialogVisible: false,
                drawer: false,
                innerDrawer: false,
                dialogVisible: false, // 编辑弹出框显示控制
                user: null,
                updateUser: {

                },
                oldPass: null,
                calendarWorkDay: '',
                daySchedule: {
                    "one": {
                        "courseName": "",
                    },
                    "two": {
                        "courseName": "",
                    },
                    "three": {
                        "courseName": "",
                    },
                    "four": {
                        "courseName": "",
                    },
                    "five": {
                        "courseName": "",
                    },
                },
                ruleForm: {
                    oldPass: '',
                    pass: '',
                    checkPass: '',
                },
                rules: {
                    oldPass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    pass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                }
            };
        },
        mounted() {
            this.initUser();
            this.calendarWorkDay = [];
            this.calendarWorkDaySelect();
        },
        methods: {
            onSuccess(){
              this.initUser();
            },
            calendar(data) {
                // console.log(data);
                // 遍历数组看是否有
                for (let temp in this.calendarWorkDay) {
                    if (this.calendarWorkDay[temp].lastIndexOf(data) != -1) {
                        return true;
                    }
                }
                return false;
            },
            calendarWorkDaySelect() {
                console.log(this.user.username);
                this.getRequest('/timetable/selectTime?username=' + this.user.username).then(resp => {
                    // 看一下返回信息
                    if (resp) {
                        this.calendarWorkDay = resp.data;
                    }
                })
            },
            todaySchedule(day) {
                // console.log(day);
                // let user = window.sessionStorage.getItem('user');
                // console.log(this.user.username);
                this.getRequest('/timetable/selectDaySchedule?day=' + day + '&username=' + this.user.username).then(resp => {
                    // 看一下返回信息
                    // console.log(resp.data);
                    if (resp) {
                        this.daySchedule = resp.data;
                        if (!this.daySchedule["one"]) {
                            this.daySchedule["one"] = {
                                "courseName": "暂无安排",
                                "classroomName": "",
                                "classNum": "",
                            }
                        }
                        if (!this.daySchedule["two"]) {
                            this.daySchedule["two"] = {
                                "courseName": "暂无安排",
                                "classroomName": "",
                                "classNum": "",
                            }
                        }
                        if (!this.daySchedule["three"]) {
                            this.daySchedule["three"] = {
                                "courseName": "暂无安排",
                                "classroomName": "",
                                "classNum": "",
                            }
                        }
                        if (!this.daySchedule["four"]) {
                            this.daySchedule["four"] = {
                                "courseName": "暂无安排",
                                "classroomName": "",
                                "classNum": "",
                            }
                        }
                        if (!this.daySchedule["five"]) {
                            this.daySchedule["five"] = {
                                "courseName": "暂无安排",
                                "classroomName": "",
                                "classNum": "",
                            }
                        }
                    }
                })
            },
            handleClose() {
                this.innerDrawer = false
                // this.$confirm('还有未保存的工作哦确定关闭吗？')
                // .then(_ => {
                //     done();
                // })
                // .catch(_ => {});
            },
            closeUpdate(){
                this.dialogVisible = false;
                this.updateUser = this.user;
                this.$message("已重置修改信息!")
            },
            updateOrInsert() {
                // console.log(this.user);
                this.postRequest('/admin/insertOrUpdate', this.updateUser).then(resp => {
                    if (resp) {
                        this.dialogVisible = false;
                        this.initUser();
                    }
                })
            },
            initUser() {
                this.getRequest('/admin/info').then(resp => {
                    if (resp) {
                        this.user = resp;
                        this.updateUser = Object.assign({}, this.user); // 对象拷贝防止指向地址相同
                        window.sessionStorage.setItem('user', JSON.stringify(resp));
                        this.$store.commit('initUser', resp);
                    }
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.ruleForm.id = this.user.id;
                        this.putRequest('/admin/updatePassword',this.ruleForm).then(resp=>{
                            if(resp){
                                this.postRequest('/logout');
                                // 清空用户信息
                                window.sessionStorage.removeItem('tokenStr');
                                window.sessionStorage.removeItem('user');
                                // 清空菜单
                                this.$store.commit('initRoutes', []);
                                // 提示信息
                                this.$message({
                                    type: 'success',
                                    message: '修改成功请重新登录!'
                                });
                                // 页面跳转
                                this.$router.replace('/');
                            }else{
                                this.$message({
                                    type: 'danger',
                                    message: '密码错误!'
                                });
                            }
                        })
                    } else {
                        this.$message({
                            type: 'danger',
                            message: 'error submit!!'
                        });
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .is-selected {
        color: #1989FA;
    }
</style>